<template>
	<el-col class="resource_block" :span="responsive">
		<dl @dblclick="handleDblclick(data)">
			<dt class="img">
				<template v-if="data.showType === '1'">
					<img :src="data | fileTypeIcon" />
				</template>
				<template v-else>
					<svg-icon :icon-name="data | fileTypeIcon"></svg-icon>
				</template>
			</dt>
			<dd :title="data.oldName">{{ data.oldName }}</dd>
		</dl>
	</el-col>
</template>

<script>
export default {
	props: {
		responsive: Number,
		data: { type: Object, default: () => {} }
	},

	data() {
		return {};
	},
	computed: {
		fullPath() {
			return this.$route.fullPath;
		}
	},
	watch: {},
	methods: {
		//双击事件
		handleDblclick(data) {
			if (data.isFolder === '1') {
				this.$router.push({ path: this.fullPath, query: { folder: data.id } });
			} else {
				let routeData = this.$router.resolve({ path: '/data/resource/' + data.id });
				window.open(routeData.href, '_blank');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.resource_block::v-deep {
	&.el-col-200 {
		width: 16.6666%;
		&:nth-child(n + 7) {
			margin-top: 6px;
		}
	}

	&.el-col-210 {
		width: 14.2766%;
		&:nth-child(n + 8) {
			margin-top: 6px;
		}
	}

	&.el-col-220 {
		width: 12.5%;
		&:nth-child(n + 9) {
			margin-top: 6px;
		}
	}

	&.el-col-230 {
		width: 11.1106%;
		&:nth-child(n + 10) {
			margin-top: 6px;
		}
	}

	&.el-col-240 {
		width: 10%;
		&:nth-child(n + 11) {
			margin-top: 6px;
		}
	}

	&.el-col-250 {
		width: 9.0909%;
		&:nth-child(n + 12) {
			margin-top: 6px;
		}
	}

	&.el-col-260 {
		width: 8.3333%;
		&:nth-child(n + 13) {
			margin-top: 6px;
		}
	}

	&.el-col-270 {
		width: 7.6923%;
		&:nth-child(n + 14) {
			margin-top: 6px;
		}
	}

	&.el-col-280 {
		width: 7.1429%;
		&:nth-child(n + 15) {
			margin-top: 6px;
		}
	}
	dl {
		padding: 10px 10px 7px;
		border-radius: 4px;
		cursor: pointer;
		user-select: none;
		&:hover {
			background-color: var(--primary-background-hover);
		}
	}

	dt.img {
		position: relative;
		width: 60%;
		padding-top: 60%;
		margin: 0 auto;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;

		img,
		svg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
		img {
			object-fit: cover;
			border-radius: 4px;
		}
	}

	dd {
		height: 40px;
		color: #606266;
		font-size: 14px;
		line-height: 20px;
		margin-top: 6px;
		text-align: center;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
}
</style>
